<script lang='ts' setup>
import { appRef } from "@/models/app.ref";
import { MessagePlugin } from "tdesign-vue-next";
import { ref, defineProps, onMounted, onUpdated } from "vue";
import { noteService } from "@/services/note.service";
import { ToolInfo } from "@/models/tool";
import { regExpImage, regURL } from "@/utils/common.methods";
import { commonService } from "@/services/common.service";
import { toolService } from "@/services/tool.service";
const props = defineProps<{ visible: boolean; tool?: ToolInfo }>();
const emit = defineEmits(["close"]);

const tool = ref({} as ToolInfo);

const isLogo = ref(false);
const isHref = ref(false);

const types = ref<string[]>([]);
const editOrCreate = ref("create");
const newOption = ref("");

onUpdated(() => {
  tool.value = props.tool;
  if (props.tool?.uid) {
    logoBlur();
    urlBlur();
  }
  types.value = appRef.tool.types;
});

onMounted(() => {});

async function logoBlur(): Promise<void> {
  isLogo.value = await regExpImage(tool.value.logo);
}
async function urlBlur(): Promise<void> {
  isHref.value =
    tool.value.href && (await commonService.regHref(tool.value.href));
}

function onDelete(): void {
  toolService.delete(tool.value?.uid).then(() => {
    emit("close", true);
  });
}

async function onSave(): Promise<void> {
  const { uid, logo, href, title, type, remark } = tool.value;
  if (uid) {
    await toolService.updated(uid, logo, href, title, type, remark);
  } else {
    await toolService.add(logo, href, title, type, remark);
  }
  emit("close", true);
}

function onBacth(): void {
  appRef.tool?.listjson?.map(async (val: ToolInfo) => {
    const { logo, href, title, type, remark } = val;
    await toolService.add(logo, href, title, type, remark);
  });
}
</script>
<template>
  <t-drawer :visible="visible" header="添加工具" @close="emit('close')" :footer="false">
    <div class="form flex-c">
      <div class="main">
        <t-space direction="vertical" size="large" style="width: 100%">
          <t-space direction="vertical" :size="10" style="width: 100%">
            <span class="red-dot">logo</span>
            <t-input v-model:value="tool.logo" @blur="logoBlur" :status="isLogo ? '' : 'error'" :tips="isLogo ? '' : '请输入可访问的图片链接'" />
          </t-space>
          <t-space direction="vertical" :size="10" style="width: 100%">
            <span class="red-dot">链接地址</span>
            <t-input v-model:value="tool.href" @blur="urlBlur" :status="isHref ? '' : 'error'" :tips="isHref ? '' : '请输入可访问的地址链接'" />
          </t-space>
          <t-space direction="vertical" :size="10" style="width: 100%">
            <span class="red-dot">名称/标题</span>
            <t-input v-model:value="tool.title" />
          </t-space>
          <t-space direction="vertical" :size="10" style="width: 100%">
            <span class="red-dot">分类</span>

            <t-select v-model="tool.type" placeholder="请选择分类" clearable>
              <t-option v-for="item in types" :key="item" :value="item" :label="item"></t-option>
              <!-- 自定义底部内容 -->
              <template #panelBottomContent>
                <div class="select-panel-footer">
                  <t-button v-if="editOrCreate === 'create'" theme="primary" variant="text" block @click="editOrCreate = 'edit'">新增选项</t-button>
                  <div v-else>
                    <t-input v-model="newOption" autofocus></t-input>
                    <t-button size="small" style="margin-top: 8px" @click="types.push(newOption);editOrCreate = 'create';newOption=''"> 确认 </t-button>
                    <t-button theme="default" size="small" style="margin-top: 8px; margin-left: 8px" @click="editOrCreate = 'create'">
                      取消
                    </t-button>
                  </div>
                </div>
              </template>
            </t-select>

            <!-- <t-input v-model:value="tool.type" /> -->
          </t-space>
          <t-space direction="vertical" :size="10" style="width: 100%">
            <span class="red-dot">简略描述</span>
            <t-textarea v-model:value="tool.remark" placeholder="请输入内容" />
          </t-space>

          <t-space direction="vertical" :size="10" style="width: 100%">
            <span>批量写入 json 文件</span>
            <t-button @click="onBacth">批量</t-button>
          </t-space>

        </t-space>
      </div>
      <t-space style="width: 100%">
        <t-popconfirm content="确认删除吗" v-if="tool?.uid" @confirm="onDelete">
          <t-button>删除</t-button>
        </t-popconfirm>
        <t-button block :disabled="!tool.logo || !isLogo || !tool.href || !isHref || !tool.title || !tool.remark || !tool.type" @click="onSave">{{ tool?.uid ? '修改' : '保存'}}</t-button>
      </t-space>
    </div>
  </t-drawer>
</template>
<style lang='scss' scoped>
.form {
  height: 100%;
  .main {
    width: 100%;
    flex: 1;
  }
}
</style>